<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 10:53:02
 * @LastEditTime : 2022-10-01 16:20:00
 * @FilePath     : \组件\插槽\作用域插槽\APP.vue
-->
// src/APP.vue
/**
<div>一、作用域插槽<br>
  插槽中内容同时使用父组件中和子组件(子组件的slot标签上的属性在父组件中用slotProps来获取)中的数据
</div>
<ul>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Feed a cat</span>
  </li>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Buy milk</span>
  </li>
</ul>
<br>
<div>二、独占默认插槽的缩写</div>
<ul>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Feed a cat</span>
  </li>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Buy milk</span>
  </li>
</ul>
<div>注意：<br> 
1、默认插槽的缩写语法不能和具名插槽混用，因为会导致作用域不明确 <br> 
2、只要出现多个插槽，请始终为所有的插槽使用完整的基于 'template' 的语法 
</div><br>
<div>三、解构插槽Prop</div><div>从slotProps中解构出来item</div>
<ul>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Feed a cat</span>
  </li>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Buy milk</span>
  </li>
</ul><br>
<div>将 item 重命名为 todo</div>
<ul>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Feed a cat</span>
  </li>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Buy milk</span>
  </li>
</ul><br>
<div>定义插槽prop的后备内容</div>
<ul>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Feed a cat</span>
  </li>
  <li>
    <!-- 绑定在 <slot > 元素上的 attribute 被称为插槽 prop -->
    <i class="fas fa-check"></i>
    <span class="green">Buy milk</span>
  </li>
</ul>
**/

<template>
  <div>一、作用域插槽 <br>
    插槽中内容同时使用父组件中和子组件(子组件的slot标签上的属性在父组件中用slotProps来获取)中的数据
  </div>
  <todo-list>
    <template v-slot:default="slotProps">
      <i class="fas fa-check"></i>
      <span class="green">{{ slotProps.item }}</span>
    </template>
  </todo-list>

  <br>

  <div>二、独占默认插槽的缩写</div>
  <todo-list>
    <template v-slot="slotProps">
      <i class="fas fa-check"></i>
      <span class="green">{{ slotProps.item }}</span>
    </template>
  </todo-list>
  <div>注意：<br>
    1、默认插槽的缩写语法不能和具名插槽混用，因为会导致作用域不明确 <br>
    2、只要出现多个插槽，请始终为所有的插槽使用完整的基于 'template' 的语法
  </div>

  <br>

  <div>三、解构插槽Prop</div>
  <div>从slotProps中解构出来item</div>
  <todo-list>
    <template v-slot="{ item }">
      <i class="fas fa-check"></i>
      <span class="green">{{ item }}</span>
    </template>
  </todo-list>

  <br>

  <div>将 item 重命名为 todo</div>
  <todo-list v-slot="{ item: todo }">
    <i class="fas fa-check"></i>
    <span class="green">{{ todo }}</span>
  </todo-list>

  <br>

  <div>定义插槽prop的后备内容</div>
  <todo-list v-slot="{ item = 'Placeholder' }">
    <i class="fas fa-check"></i>
    <span class="green">{{ item }}</span>
  </todo-list>


</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TodoList from './components/todo-list.vue'

export default defineComponent({
  name:"APP",
  components: {
    TodoList
  }
})
</script>